<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="headBox">
      <el-cascader
        v-model="selectedOptions"
        :options="categoriesList"
        @change="handleChange"
        :props="props"
        clearable
        style="margin-bottom:20px"
      >
      </el-cascader>

      <div>
        <el-radio v-model="attr_sel" label="only" border @change="handleChange"
          >静态参数</el-radio
        >
        <el-radio v-model="attr_sel" label="many" border @change="handleChange"
          >动态参数</el-radio
        >
      </div>

      <div>
        <el-button type="primary" plain @click="addParam">添加参数</el-button>
      </div>
    </div>

    <el-table :data="currentAttr" style="width: 100%"   >
      <el-table-column fixed prop="attr_id" label="参数Id" width="100">
      </el-table-column>
      <el-table-column prop="attr_name" label="参数名" width="120">
      </el-table-column>
      <el-table-column prop="attr_sel" label="参数类型" width="120">
      </el-table-column>
      <el-table-column prop="attr_write" label="参数输入方式" width="120">
      </el-table-column>
      <el-table-column prop="cat_id" label="参数所属分类Id" width="120">
      </el-table-column>
      <el-table-column prop="attr_vals" label="attr_vals" width="120">
      </el-table-column>
      <el-table-column prop="delete_time" label="参数删除时间" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加分类" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm" ref="addForm">
        <el-form-item label="参数名" prop="cat_pid">
          <el-input v-model="addForm.attr_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数类型" prop="attr_sel">
          <el-radio v-model="addForm.attr_sel" label="only" border
            >静态参数</el-radio
          >
          <el-radio v-model="addForm.attr_sel" label="many" border
            >动态参数</el-radio
          >
        </el-form-item>
        <el-form-item label="参数值" prop="attr_vals">
          <el-input v-model="addForm.attr_vals" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParamSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改分类" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="参数名" prop="cat_pid">
          <el-input v-model="editForm.attr_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数类型" prop="attr_sel">
          <el-radio v-model="editForm.attr_sel" label="only" border
            >静态参数</el-radio
          >
          <el-radio v-model="editForm.attr_sel" label="many" border
            >动态参数</el-radio
          >
        </el-form-item>
        <el-form-item label="参数值" prop="cat_name">
          <el-input v-model="editForm.attr_vals" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParamSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getCategories,
  getParams,
  addParams,
  editParams,
  deleteParams
} from "../../api/index";

export default {
  name: "",
  data() {
    return {
      categoriesList: [],
      selectedOptions: [],
      props: {
        value: "cat_id",
        label: "cat_name"
      },

      attr_sel: "only",

      currentAttr: [],

      addDialogFormVisible: false,
      editDialogFormVisible: false,

      addForm: {
        cat_id: "",
        attr_name: "",
        attr_sel: "",
        attr_vals: ""
      },

      editForm: {
        cat_id: "",
        attr_id: "",
        attr_name: "",
        attr_sel: "",
        attr_vals: ""
      }
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  mounted() {},
  methods: {
    async initGetCategories() {
      let { data, meta } = await getCategories(this.getCategoriesList);
      if (meta.status !== 200) return this.$message.error("获取失败");
      //   console.log(data);
      //   console.log(meta);
      this.categoriesList = data;
    },

    handleChange() {
      //   console.log(this.selectedOptions);
      if (this.selectedOptions.length !== 3) {
        // 没有选中三级分类，把分类重置为空
        this.selectedOptions = [];
      } else {
        // 选中了三级分类后，获取该分类对应的参数列表数据
        this.getParamsList();
      }
    },

    async getParamsList() {
      //   console.log(this.selectedOptions[this.selectedOptions.length - 1]);
      //   console.log(this.attr_sel);
      let { data, meta } = await getParams({
        cat_id: this.selectedOptions[this.selectedOptions.length - 1],
        sel: this.attr_sel
      });
      if (meta.status !== 200) return this.$message.error("获取参数失败");
      this.currentAttr = data.reduce((pre, cur) => {
        cur.attr_sel = cur.attr_sel == "only" ? "静态参数only" : "动态参数many";
        cur.attr_write =
          cur.attr_write == "manual" ? "手工录入manual" : "从列表选择list";
        cur.delete_time = cur.delete_time == null ? "/" : cur.delete_time;
        return [...pre, cur];
      }, []);

      //   console.log(this.currentAttr);
    },

    handleEdit(row) {
      console.log(row);
      this.editForm = row;
      this.editDialogFormVisible = true;
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该参数, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          console.log(row);
          let { data, meta } = await deleteParams({
            cat_id: row.cat_id,
            attr_id: row.attr_id
          });

          if (meta.status === 200) {
            this.$message.success("删除成功");
            this.$nextTick(() => {
              this.getParamsList();
            });
          } else {
            this.$message.error(meta.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    addParam() {
      if (this.selectedOptions.length !== 3)
        return this.$message.error("请先选择要添加参数的分类");
      this.addForm.cat_id = this.selectedOptions[2];
      this.addDialogFormVisible = true;
    },

    async addParamSubmit() {
      console.log(this.addForm);
      if (
        !this.addForm.cat_id ||
        !this.addForm.attr_name ||
        !this.addForm.attr_sel ||
        !this.addForm.attr_vals
      )
        return this.$message.error("请填写数据");
      let { data, meta } = await addParams(this.addForm);

      if (meta.status === 201) {
        this.$message.success("添加成功");
        this.addDialogFormVisible = false;
        this.addForm.cat_id = "";
        this.addForm.attr_name = "";
        this.addForm.attr_sel = "";
        this.addForm.attr_vals = "";

        this.$nextTick(() => {
          this.getParamsList();
        });
      } else {
        this.$message.error(meta.msg);
      }
    },
    async editParamSubmit() {
      let { data, meta } = await editParams(this.editForm);

      if (meta.status === 200) {
        this.$message.success("修改成功");
        this.editDialogFormVisible = false;
        this.$nextTick(() => {
          this.getParamsList();
        });
      } else {
        this.$message.error(meta.msg);
      }
    }
  },
  filters: {},
  beforeMount() {
    this.initGetCategories();
  }
};
</script>

<style scoped lang="css">
.headBox {
  display: flex;
  justify-content: space-around;
}
</style>
